<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <div class="header-box">
      <header>
        <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
        <p>选择网格</p>
        <i class="fa fa-bars" @click="toFeedbackList"></i>
      </header>
      <div class="top-ban"></div>
      <img src="../assets/header.png">
    </div>
    <table class="table-form">
      <tr>
        <td>所在省</td>
        <td>
          <select v-model="provinceId" @change="changeProvince()">
            <option
                :value="province.provinceId"
                v-for="province in provinceArr"
                :key="province.provinceId"
            >{{province.provinceName}}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>所在市</td>
        <td>
          <select>
            <option :value="cityArr.cityId"
            v-for="city in  cityArr"
            :key="cityArr.cityId">{{city.cityName}}</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>地址</td>
        <td><input type="text" placeholder="具体地址" v-model="address"></td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="btn" @click="next">下一步</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter } from "vue-router";
import {listGridCityByProvinceIdApi, listGridProvinceAll} from "@/axios/api/OthersApi";
const router = useRouter();
const axios = inject("axios");
const provinceArr = ref([]);
const cityArr = ref([]);
const provinceId = ref(0);
const cityId = ref(0);
const address = ref("");
//初始化数据
const init = () => {
  listGridProvinceAll()
      .then((response) => {
        if (response.code !== 200) {
          return;
        }
        provinceArr.value = response.result;
        provinceId.value = provinceArr.value[0].provinceId;
        //根据省份获取市列表
        listGridCityByProvinceId(provinceArr.value[0].provinceId);

      }).catch((err)=>console.log(err))
};
init();
//根据省份获取市列表
const listGridCityByProvinceId = (provinceId) => {
  let params={
    'provinceId':provinceId
  }
  listGridCityByProvinceIdApi(params)
      .then(response=>{
        /*if(response.code!==200){
          console.log(response)
          alert(response.message);
          return;
        }*/
        cityArr.value=response.result;
        cityId.value=response.result[0].cityId;
      }).catch((err)=>console.log(err))
}
//省市联动
const changeProvince = function () {
  listGridCityByProvinceId(provinceId.value)
}
const next = () => {
  if(address.value===""){
    ElMessage.error("地址不能为空!");
    return;
  }
  router.push({
    path:'/selectAqi',
    query:{
      provinceId: provinceId.value,
      cityId: cityId.value,
      address: address.value,
    }
  })
}
//选择网格
const toFeedbackList = () => {
  router.push("/feedbackList");
};
</script>
<style>
</style>